import React, {PureComponent} from 'react'
import propTypes from 'prop-types'

class DefaultLayout extends PureComponent {
  render() {
    const {header, footer, children, extra, className} = this.props
    return (
      <div className={'default-container' + (className ? ` ${className}` : '')}>
        <header className="header">{header}</header>
        <div
          className="default-content"
          onTouchMove={e => {
            e.stopPropagation()
            e.preventDefault()
          }}
        >{children}</div>
        {extra}
        <footer className="footer">{footer}</footer>
      </div>
    )
  }
}

DefaultLayout.propsTypes = {
  header: propTypes.element,
  footer: propTypes.element,
  extra: propTypes.element,
  className: propTypes.string
}

export default DefaultLayout
